var React = require('react');
var Checkbox = require('../Checkbox');
var TableFilter = require('./TableFilter');

module.exports = React.createClass({
	displayName:'TableHeader',
	getInitialState:function(){
		return {

		}
	},
	componentDidMount:function(){

	},
	__onCheckBoxChange: function (event, value, cb){
		this.props.onCheckBoxChange && this.props.onCheckBoxChange(value, this, cb);
	},
	__itemRender: function (item, index){
		var _content = null;
		switch (item.type) {
			case 'checkbox':
				_content = <Checkbox onChange={this.__onCheckBoxChange} />;
				break;
			default:
				_content = <span>{item.title||item.name}</span>;
				break;
		}

		return <th key={index} className={'text-align-'+(item.textAlign||'left')} width={(item.width?item.width:0)}>{_content}</th>
	},
	render:function(){
		return (
			<thead>
				<tr className="row head">
					{
						(this.props.items||[]).map(this.__itemRender)
					}
				</tr>
				{
					this.props.enableFilter && <TableFilter items={this.props.items} />
				}
			</thead>
		);
	}
});
